<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认 margin padding */
    * {
      margin: 0;
      padding: 0;
    }

    /* 去除 li 的小圆点 */
    li {
      list-style: none;
    }

    /* 清除图片底部缝隙 */
    img {
      vertical-align: middle;
    }

    body {
      background-color: #000;
    }

    .list {
      /* flex 盒子设置 */
      display: flex;
      /* flex 换行排列 */
      flex-wrap: wrap;
      /* flex 水平排列 */
      justify-content: space-evenly;
      /* flex 垂直排列 */
      align-content: space-evenly;

      /* 盒子居中 */
      margin: 100px auto;
      /* 边框 */
      border: 10px solid #fff;
      
      /* 🔔calc() 计算函数，注意运算符号之间用记得🎯两边留空格 */
      /* 宽度计算：一张图片宽是 200px */
      width: calc(200px * 3 + 10px * 4);
      /* 高度迥然：一张图片宽是 186px */
      height: calc(186px * 2 + 10px * 3);
    }
  </style>
</head>

<body>
  <div>
    <ul class="list">
      <li> <img src="./images/01.jpg" alt=""> </li>
      <li> <img src="./images/02.jpg" alt=""> </li>
      <li> <img src="./images/03.jpg" alt=""> </li>
      <li> <img src="./images/04.jpg" alt=""> </li>
      <li> <img src="./images/05.jpg" alt=""> </li>
      <li> <img src="./images/06.jpg" alt=""> </li>
    </ul>
  </div>
</body>

</html>